<template>

  <!-- 新建客户弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             :close-on-click-modal="false" style="width:1000px;padding:40px;">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="客户名">
            <el-input placeholder="请输入内容" v-model="saveCustomerForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="dialogTitle=='新增客户'">
          <el-form-item label="密码">
            <el-input :value="saveCustomerForm.password" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户类型">
            <el-select placeholder="请选择" v-model="saveCustomerForm.roleId">
              <el-option v-for="item in custType" :label="item.role" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select placeholder="请选择" v-model="saveCustomerForm.status">
              <el-option v-for="item in custStatus" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>


    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveCustomer">确定</el-button>
    </template>
  </el-dialog>
  <!--  客户搜索卡片-->
  <el-card style="margin: 5px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="客户名" style="width: 150px;">
        <el-input v-model="searchCustomerForm.username" @keydown.enter="loadCustomer" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="手机号" style="width: 150px;">
        <el-input v-model="searchCustomerForm.phone" @keydown.enter="loadCustomer" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="性别" style="width: 150px;">
        <el-select v-model="searchCustomerForm.gender" @change="loadCustomer" placeholder="请选择">
          <el-option label="男" value="1"></el-option>
          <el-option label="女" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户状态" style="width: 180px;">
        <el-select v-model="searchCustomerForm.status" @change="loadCustomer" placeholder="请选择">
          <el-option v-for="item in custStatus" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCustomer">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!--  客户表格卡片-->
  <el-card style="margin:5px" >
    <div style="margin: 10px 0px 40px 10px;">
      客户信息列表
      <el-button @click="addCustomer" type="primary" style="float:right;margin-top: -3px;">新增客户</el-button>
    </div>
    <div>
      <el-table :data="customerData" style="width: 100%;">
        <el-table-column type="index" width="80" align="center" label="编号"></el-table-column>
        <el-table-column align="center" prop="username" label="用户名"></el-table-column>
        <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
        <el-table-column align="center" prop="phone" label="手机号"></el-table-column>
        <el-table-column align="center" prop="age" label="年龄"></el-table-column>
        <el-table-column align="center" prop="gender" label="性别" :formatter="customerGender"></el-table-column>
        <el-table-column align="center" prop="createTime" label="注册时间"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="更新时间"></el-table-column>
        <el-table-column align="center" prop="deleteTime" label="注销时间"></el-table-column>
        <el-table-column align="center" prop="roleId" label="用户类型" :formatter="custTypeFormatter"></el-table-column>
        <el-table-column align="center" prop="address" label="住址"></el-table-column>
        <el-table-column align="center" prop="status" label="账号状态" :formatter="custStatusFormatter"></el-table-column>
        <el-table-column label="操作" min-width="160" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="editCustomer(scope.row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="deleteCustomer(scope.row.id)" v-if="searchCustomerForm.status==0">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>


</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";

const customerData = ref([]);
const searchCustomerForm = ref({username:'',status:''})
const dialogVisible = ref(false);
const dialogTitle = ref("");
const saveCustomerForm = ref({password:123456})
const custStatus=ref([])
const custType=ref([])

const loadCustomer = () => {
  axios.post(BASE_URL+'/v1/customer/select',searchCustomerForm.value)
      .then((response)=>{
        if (response.data.code==2000){
          customerData.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })

}
const loadCustType = () => {
  axios.post(BASE_URL+'/v1/role/select',{role:'客户'})
      .then((response)=>{
        if (response.data.code==2000){
          custType.value=response.data.data
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}
const resetSearch = () => {
  searchCustomerForm.value={};
  loadCustomer();
}

onMounted(()=>{
      loadCustomer();
      loadDictOptions(custStatus,"CustStatus");
      loadCustType();
})

const addCustomer = () => {
  dialogTitle.value="新增客户"
  dialogVisible.value=true
  saveCustomerForm.value = {password:123456}
}
const handleClose = ()=>{
  if(confirm('您确认要关闭弹窗吗?')){
    saveCustomerForm.value = {};
    dialogVisible.value = false;
  }
}

const saveCustomer = () => {
  axios.post(BASE_URL+'/v1/customer/save',saveCustomerForm.value)
      .then((response)=>{
        if (response.data.code===2000){
          ElMessage.success("保存成功")
          dialogVisible.value=false
          loadCustomer()
        }else {
          ElMessage.error(response.data.data)
        }
      })
}

const editCustomer = (row) => {
  loadCustomer()
  dialogTitle.value="编辑客户信息";
  dialogVisible.value=true;
  saveCustomerForm.value=row
}
const deleteCustomer = (id) => {
  if (confirm("确定要删除吗")){
    axios.delete(BASE_URL+'/v1/customer/delete/'+id)
        .then((response)=>{
          if (response.data.code==2000){
            ElMessage.success(response.data.msg)
            loadCustomer()
          }else {
            ElMessage.error(response.data.msg)
          }
        })
  }
}
const customerGender =(row,column,cellValue,index)=>{
  if (cellValue){
    return cellValue==1?'男':'女'
  }
}
const custStatusFormatter =(row,column,cellValue,index)=>{
  if (!custStatus){
    return cellValue;
  }
  for (let item of custStatus.value){
    if (item.value == cellValue){
      cellValue = item.label
    }
  }
  return cellValue;
}
const custTypeFormatter =(row,column,cellValue,index)=>{
  if (!custType){
    return cellValue
  }
  for (let item of custType.value){
    if (item.id==cellValue){
      cellValue=item.role
    }
  }
}






</script>


<style scoped>

</style>